<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公司网站</title>
    <!-- 自己修改成你的css名称 -->
    <link rel="stylesheet" href="./11.21.css">
</head>
<body>
</script>
<style>
	body {
    margin: 0;
    text-align: center;
    font-size: 60px;
    color: white;
    line-height: 100vh;
}

.main-div {
    width: 100%;
    height: 100vh;
    background-image: url(img/22-08-30-030.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    z-index: -1;
}

.transparent-module {
    width: 100%;
    height: 100vh;
}

.top {
    width: 100%;
    height: 100vh;
    background-image: url(img/15794045415460142.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.middle {
    width: 100%;
    height: 100vh;
    background: #0f0;
}

.bottom {
    width: 100%;
    height: 100vh;
    background: #00f;
}
a{
	color: yellow;
	text-decoration: none;
}
a:hover{
	color: red;
}


</style>


    <header></header>
    <main>
        <!-- 悬浮最底层的背景 -->
        <div class="main-div" id="main-div"></div>
        <!-- 红色top模块 -->
        <div class="top">我们团队自始至终本着为用户着想的原则</div>
        <!-- 透明且高度100%模块 -->
        <div class="transparent-module">为更多用户实现他们的电竞梦</div>
        <!-- 绿色middle模块 -->
        <div class="middle" id="middle">致力打造一个健康、绿色的电竞外设交易平台</div>
        <!-- 透明且高度100%模块 -->
        <div class="transparent-module" id="tm">给用户带来方便愉悦的体验</div>
        <!-- 蓝色bottom模块 -->
        <div class="bottom"><a href="http://leslie123456.gitee.io/product-website">返回</a></div>
    </main>
    <footer></footer>
</body>
<script>
    window.onload = () => {
        // console.log('welcome')
        var mainDiv = document.getElementById('main-div');
        var middle = document.getElementById('middle');
        var tm = document.getElementById('tm');
        // console.log(middle.offsetTop);
        // console.log(middle.getBoundingClientRect().top);
        // 获取绿色middle模块离页面顶部的距离
        var middleTop = middle.offsetTop || middle.getBoundingClientRect().top;
        // 获取第二个透明且高度100%模块离页面顶部的距离
        var tmTop = tm.offsetTop;
        // 实时监听当前页面离页面顶部的距离
        window.addEventListener("scroll", function(event) {
            // 当前页面离页面顶部的距离
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // console.log(scrollTop)
            // 判断切换背景图片
            if (scrollTop < middleTop) {
                mainDiv.style.backgroundImage = "url(img/22-10-12-012.jpg)";
            } else if (scrollTop > middleTop) {
                mainDiv.style.backgroundImage = "url(img/cfa9f9bd-7679-4399-8802-b05c47185a14.jpg)";
            }
        });
    }
</script>

</html>